@import "./bp-icon-font.css";
@import "./bp-svg-icon.css";

.bl-button {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.bl-button > .txt {
  position: relative;
}
.bl-button:disabled {
  cursor: not-allowed;
}
.bl-button--primary {
  background-color: #23ade5;
  color: #fff;
  border-radius: 4px;
}
.bl-button--primary:hover {
  background-color: #39b5e7;
}
.bl-button--primary:active {
  background-color: #21a4d9;
}
.bl-button--primary:disabled {
  background-color: #e9eaec;
  color: #b4b4b4;
}
.bl-button--ghost {
  border: 1px solid #23ade5;
  color: #23ade5;
  border-radius: 4px;
}
.bl-button--ghost:hover {
  border-color: #39b5e7;
  background-color: #39b5e7;
  color: #fff;
}
.bl-button--ghost:active {
  border-color: #21a4d9;
  background-color: #21a4d9;
  color: #fff;
}
.bl-button--ghost:disabled {
  border-color: #d0d7dd;
  background-color: transparent;
  color: #b4b4b4;
}
.bl-button--shallow {
  background-color: #e9eaec;
  color: #999;
  border-radius: 4px;
}
.bl-button--shallow:hover {
  background-color: #edeeef;
}
.bl-button--shallow:active {
  background-color: #dddedf;
}
.bl-button--shallow:disabled {
  background-color: #e9eaec;
  color: #b4b4b4;
}
.bl-button--shallow-ghost {
  border: 1px solid #e9eaec;
  color: #999;
  border-radius: 4px;
}
.bl-button--shallow-ghost:hover {
  border-color: #39b5e7;
  background-color: #39b5e7;
  color: #fff;
}
.bl-button--shallow-ghost:active {
  border-color: #21a4d9;
  background-color: #21a4d9;
  color: #fff;
}
.bl-button--shallow-ghost:disabled {
  border-color: #e9eaec;
  background-color: #e9eaec;
  color: #b4b4b4;
}
.bl-button--text {
  color: #23ade5;
  border-radius: 4px;
}
.bl-button--text:hover {
  background-color: #eef9fd;
}
.bl-button--text:active {
  background-color: #eef9fd;
}
.bl-button--text:disabled {
  color: #b4b4b4;
}
.bl-button--size {
  min-width: 104px;
  height: 32px;
  font-size: 14px;
}
.bl-button--small {
  min-width: 80px;
  height: 24px;
  font-size: 12px;
}
.bl-button--ssmall {
  min-width: 64px;
  height: 18px;
  padding: 3px 12px;
  font-size: 12px;
}

input,
button,
textarea {
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
img {
  border: 0;
  outline: 0;
}
li {
  list-style: none;
}
a {
  outline: none;
  text-decoration: none;
}
button {
  outline: none;
}
input {
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
em {
  font-style: normal;
}

.trends_body {
  font: 14px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;

  color: #222;
  font-size: 14px;
  background: #f5f6f7;
}

.p-rel {
  position: relative;
}

.p-abs {
  position: absolute;
}

.p-fixed {
  position: fixed;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.f-clear:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

.d-block {
  display: block;
}

.d-i-block {
  display: inline-block;
}

.d-table {
  display: table;
}

.d-table-cell {
  display: table-cell;
}

.d-none {
  display: none;
}

.t-center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.c-default {
  cursor: default;
}

.c-pointer {
  cursor: pointer;
}

.fs-8 {
  font-size: 8px;
}

.fs-9 {
  font-size: 9px;
}

.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}

.fs-26 {
  font-size: 26px;
}

.fs-28 {
  font-size: 28px;
}

.fs-30 {
  font-size: 30px;
}

.fs-32 {
  font-size: 32px;
}

.tc-pink {
  color: #f25d8e;
}

.tc-pink-hover {
  color: #ff85ad;
}

.tc-pink-sub {
  color: #ffaec9;
}

.tc-blue {
  color: #00a1d6;
}

.tc-blue-hover {
  color: #00b5e5;
}

.tc-blue-sub {
  color: #68cff1;
}

.tc-yellow {
  color: #f7b32c;
}

.tc-yellow-hover {
  color: #ffc248;
}

.tc-red {
  color: #e40c0c;
}

.tc-black {
  color: #222;
}

.tc-dark-slate {
  color: #6d757a;
}

.tc-slate {
  color: #99a2aa;
}

.bc-gray {
  border-color: #ccd0d7;
}

.bc-light-gray {
  border-color: #e5e9ef;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #f4f5f7;
}

.bg-center {
  background-position: center center;
}

.over-hidden {
  overflow: hidden;
}

.b-circle {
  border-radius: 50%;
}

.b-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ff-yahei {
  font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Microsoft SanSerf", "å¾®è½¯é›…é»‘";
}

.ls-0 {
  letter-spacing: 0;
}

.bp-v-middle {
  vertical-align: middle;
}

.break-all {
  word-break: break-all;
}

.fw-bold {
  font-weight: bold;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body,
button,
form,
input,
li,
ol,
p,
td,
textarea,
ul {
  margin: 0;
  padding: 0;
}

margin,
nav {
  display: block;
}

img {
  border: 0;
  outline: 0;
}

li {
  list-style: none;
}

a {
  outline: none;
  text-decoration: none;
}

button {
  outline: none;
}

em {
  font-style: normal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

textarea-webkit-input-placeholder {
  color: #99a2aa;
}

textarea-moz-input-placeholder {
  color: #99a2aa;
}

textarea-ms-input-placeholder {
  color: #99a2aa;
}

.dynamic-link-hover-bg {
  border-radius: 4px;
}

.dynamic-link-hover-bg:hover {
  background-color: #dde2eb;
}

.f-left {
  float: left;
}

.f-clear:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

.home-page {
  width: 100%;
}

.home-page .home-container {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 20px;
}

.home-page .home-container .home-content {
  //width: 1160px;
  width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  position: relative;
}

.home-page .home-container .home-content .left-panel {
  width: 244px;
  margin-right: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.home-page .home-container .home-content .center-panel {
  margin: 0 auto;
  width: 744px;
  //width: 632px;
  //margin: 0 8px;
}

.home-page .home-container .home-content .center-panel .section-block {
  padding: 16px;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  z-index: 11;
  margin-bottom: 8px;
}

.home-page .home-container .home-content .center-panel .send-panel-container {
  width: 100%;
  height: 144px;
}

.home-page .home-container .home-content .center-panel .card-list {
  //margin-top: 8px;
}

.home-page .home-container .home-content .center-panel .card-list .draft-tab {
  width: 100%;
  height: 48px;
  line-height: 48px;
  color: #6d757a;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 0 20px 0 24px;
}

.home-page .home-container .home-content .center-panel .card-list .draft-tab .switch {
  float: right;
  font-size: 13px;
  color: #00a1d6;
}

.home-page .home-container .home-content .center-panel .card-list .draft-tab .switch:hover {
  color: #00b5e5;
}

.home-page .home-container .home-content .center-panel .card-list .loading-content {
  width: 100%;
  height: 270px;
  line-height: 270px;
  border-radius: 4px;
}

.home-page .home-container .home-content .center-panel .card-list .loading-content .loading-img {
  position: relative;
  top: 5px;
  padding: 0 5px;
}

.home-page .home-container .home-content .center-panel .card-list .empty-content {
  width: 100%;
  height: 500px;
  border-radius: 4px;
}

.home-page .home-container .home-content .center-panel .card-list .empty-content .empty-img {
  margin-top: 128px;
}

.home-page .home-container .home-content .right-panel {
  width: 268px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.user-wrapper {
  position: relative;
  width: 244px;
  height: 188px;
}


.user-panel {
  position: relative;
  width: 244px;
  height: 188px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.user-panel .loading-content {
  width: 100%;
  height: 188px;
  line-height: 188px;
}

.user-panel .loading-content .loading-text {
  text-align: center;
}

.user-panel .loading-content .loading-text .loading-img {
  position: relative;
  top: 5px;
  padding: 0 5px;
}

.user-panel .content {
  width: 100%;
  height: 188px;
}

.user-panel .content .user-pic {
  width: 100%;
  height: 64px;
  background: url("../../assets/logo/bj01.jpeg") center/cover no-repeat;
}

.bili-at-popup {
  z-index: 10;
  width: 246px;
  border: 1px solid #e5e9ef;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  border-radius: 4px;
  position: absolute;
  background-color: #fff;
  font-size: 12px;
}
.bili-at-popup__hint {
  margin: 0;
  height: 40px;
  line-height: 42px;
  padding-left: 12px;
  letter-spacing: 0;
  cursor: default;
  color: #99a2aa;
  font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Microsoft SanSerf";
}
.bili-at-popup__list {
  width: 100%;
  max-height: 353px;
  overflow: auto;
}
.bili-at-popup__group-name {
  line-height: 17px;
  padding-left: 12px;
  color: #505050;
  padding-bottom: 3px;
}
.bili-at-popup__group:not(:last-child)-list {
  padding-bottom: 7px;
}
.bili-at-popup__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 12px;
  height: 50px;
  cursor: pointer;
}
.bili-at-popup__user--selected {
  background-color: #f4f5f7;
}
.bili-at-popup__user-avatar {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.bili-at-popup__user-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 20px;
}
.bili-at-popup__user-avatar .bili-at-popup__user-auth {
  position: absolute;
  z-index: 9;
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/user-auth.e9bcc833.png);
  background-repeat: no-repeat;
  right: -3px;
  top: 22px;
  width: 18px;
  height: 18px;
  -webkit-transform: scale(0.66);
  transform: scale(0.66);
}
.bili-at-popup__user-avatar .bili-at-popup__user-auth--personal {
  background-position: -39px -82px;
}
.bili-at-popup__user-avatar .bili-at-popup__user-auth--organization {
  background-position: -5px -82px;
}
.bili-at-popup__user-info {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-left: 8px;
}
.bili-at-popup__user-name {
  color: #282828;
  line-height: 16px;
  letter-spacing: 0;
}
.bili-at-popup__user-fans {
  margin-top: 3px;
  line-height: 16px;
  color: #99A2AA;
  letter-spacing: 0;
}


.user-panel .content .user-name {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 80px;
  padding-top: 10px;
}

.user-panel .content .user-name:hover {
  color: #00b5e5;
}

.user-panel .content .user-uid {
  padding-left: 80px;
  padding-top: 2px;
}

.user-panel .content .bottom {
  width: 192px;
  height: 92px;
  margin: 0 26px 0 26px;
}

.user-panel .content .bottom .number-part {
  width: calc(100% / 3);
  height: 92px;
  text-align: center;
}

.user-panel .content .bottom .number-part:hover .numbers {
  color: #00a1d6;
}

.user-panel .content .bottom .number-part .numbers {
  letter-spacing: 0;
  padding-top: 35px;
  font-weight: bold;
  line-height: 19px;
  color: #222;
}

.user-panel .content .bottom .number-part .text {
  font-size: 12px;
  color: #99a2aa;
  padding-top: 9px;
}

.user-panel .content .user-head {
  position: absolute;
  width: 56px;
  height: 56px;
  left: 16px;
  top: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.publish-panel {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.publish-panel .bp-emoji-box {
  position: absolute;
  left: -15px;
  top: 100%;
  z-index: 8;
}

/*.publish-panel .image-box {
  position: absolute;
  left: 30px;
  z-index: 7;
}*/

.publish-panel .vote-box {
  position: absolute;
  z-index: 11;
}

.publish-panel .lottery-box {
  position: absolute;
  z-index: 11;
}

.publish-panel .settings-box {
  display: inline-block;
  position: relative;
}

.publish-panel .settings-btn {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/settings-btn.7c650286.svg) center/contain no-repeat;
}

.publish-panel .settings-btn:hover,
.publish-panel .settings-btn.active {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/settings-btn-active.7105be9a.svg);
}

.publish-panel .settings-panel {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 10px;
  width: 108px;
  padding: 12px;
  border: 1px solid #e5e9f0;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.17);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
}

.publish-panel .settings-panel .label {
  margin-left: 8px;
}

.publish-panel .dynamic-btn {
  border: none;
  cursor: pointer;
}

.publish-panel .dynamic-btn.with-border-radius {
  border-radius: 6px;
}

.editor {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.editor::-webkit-scrollbar {
  width: 6px;
  background-color: rgba(1, 1, 1, 0);
}

.editor::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.core-style {
  width: 100%;
  min-height: 22px;
  max-height: 300px;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: pre-wrap;
  color: #222;
  background-color: #fff;
  font-size: 14px;
  vertical-align: baseline;
  outline: none;
  line-height: 22px;
  border-radius: 4px;
  word-break: break-word;
  word-wrap: break-word;
}

.core-style:hover,
.core-style:focus,
.core-style:active {
  background: #fff;
}

.core-style.too-long {
  border-color: #ff94b1;
}

.core-style.in-popup {
  max-height: 180px;
}

.placeholder-shown::before {
  content: attr(placeholder);
  color: #99a2aa;
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 1px;
}
.toolbar {
  margin-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.toolbar-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}
.toolbar-box .icon-reserve {
  margin-left: 20px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.toolbar-box .icon-reserve.active,
.toolbar-box .icon-reserve:hover {
  background-image: url();
}

.publish-launcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.to-article {
  margin-right: 10px;
  background-color: #f4f5f7;
  color: #00a1d6;
}
.dynamic-specification-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -300px !important;
  margin-left: -413px;
  z-index: 10003;
}
.dynamic-specification-popup.is-popup {
  top: 100%;
}
.sch-confirm-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10003;
  background: rgba(0,0,0,0.3);
}
.is-popup-panel .sch-confirm-wrapper {
  width: 100%;
  height: 100%;
}
.sch-confirm-wrapper .sch-confirm {
  left: 0;
  right: 0;
  margin: 0 auto;
}
.sch-confirm-wrapper .sch-confirm p {
  line-height: 40px;
}
.indicator {
  margin-right: 20px;
  color: #99a2aa;
  font-size: 14px;
  position: relative;
}
.indicator::after {
  position: absolute;
  top: -1px;
  right: -12px;
  content: "|";
  color: #e5e9ef;
}
.indicator.too-long {
  color: #ff94b1;
}
.article-pub-btn-box {
  position: relative;
}
.article-pub-btn-box .article-pub-tips {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 220px;
  height: 34px;
  padding: 0 10px;
  background-color: #00a1d6;
  border-radius: 6px;
  -webkit-box-shadow: 0 -2px 4px 0;
  box-shadow: 0 -2px 4px 0;
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  top: -42px;
  right: -70px;
}
.article-pub-btn-box .article-pub-tips span,
.article-pub-btn-box .article-pub-tips .icon-group-dynamic {
  display: inline-block;
  font-size: 12px;
}
.article-pub-btn-box .article-pub-tips .icon-group-dynamic {
  -webkit-text-stroke-width: 0;
  font-weight: 100;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  cursor: pointer;
}
.article-pub-btn-box .article-pub-tips::after {
  position: absolute;
  width: 6px;
  height: 6px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  background-color: #00a1d6;
  content: " ";
  bottom: -3px;
  left: 102px;
}
.toolbar-item+.publish-launcher .indicator {
  padding-left: 12px;
  border-left: 1px solid #ccd0d7;
}

.publish-btn {
  width: 70px;
  height: 32px;
  outline: none;
  background-color: #00a1d6;
  font-size: 13px;
  line-height: 33px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.publish-btn.publishing,
.publish-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.publish-btn:not(.disabled):hover {
  opacity: 0.8;
}
.to-article {
  margin-right: 10px;
  background-color: #f4f5f7;
  color: #00a1d6;
}
.dynamic-specification-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -300px !important;
  margin-left: -413px;
  z-index: 10003;
}
.dynamic-specification-popup.is-popup {
  top: 100%;
}
.sch-confirm-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10003;
  background: rgba(0,0,0,0.3);
}
.is-popup-panel .sch-confirm-wrapper {
  width: 100%;
  height: 100%;
}
.sch-confirm-wrapper .sch-confirm {
  left: 0;
  right: 0;
  margin: 0 auto;
}
.sch-confirm-wrapper .sch-confirm p {
  line-height: 40px;
}
.indicator {
  margin-right: 20px;
  color: #99a2aa;
  font-size: 14px;
  position: relative;
}
.indicator::after {
  position: absolute;
  top: -1px;
  right: -12px;
  content: "|";
  color: #e5e9ef;
}
.indicator.too-long {
  color: #ff94b1;
}
.article-pub-btn-box {
  position: relative;
}
.article-pub-btn-box .article-pub-tips {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 220px;
  height: 34px;
  padding: 0 10px;
  background-color: #00a1d6;
  border-radius: 6px;
  -webkit-box-shadow: 0 -2px 4px 0;
  box-shadow: 0 -2px 4px 0;
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  top: -42px;
  right: -70px;
}
.article-pub-btn-box .article-pub-tips span,
.article-pub-btn-box .article-pub-tips .icon-group-dynamic {
  display: inline-block;
  font-size: 12px;
}
.article-pub-btn-box .article-pub-tips .icon-group-dynamic {
  -webkit-text-stroke-width: 0;
  font-weight: 100;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  cursor: pointer;
}
.article-pub-btn-box .article-pub-tips::after {
  position: absolute;
  width: 6px;
  height: 6px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  background-color: #00a1d6;
  content: " ";
  bottom: -3px;
  left: 102px;
}
.toolbar-item+.publish-launcher .indicator {
  padding-left: 12px;
  border-left: 1px solid #ccd0d7;
}

.bp-emoji-box-container {
  position: relative;
}
.box-toggle {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  margin: 0;
  background-color: transparent;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  font-size: 24px !important;
  margin-left: 20px;
}
.box-toggle:hover,
.box-toggle.active {
  color: #00a1d6;
}
.box-toggle.disabled {
  color: #aaa !important;
  cursor: not-allowed;
}
.emoji-btn {
  margin-left: 0;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.emoji-btn.active,
.emoji-btn:hover {
  background-image: url();
}
.bp-emoji-box {
  position: absolute;
  top: 30px;
  left: -15px;
  z-index: 8;
}

.upload-image-wrapper {
  position: relative;
  padding: 0 15px;
}
.upload-list {
  //margin-left: -10px;
  margin-bottom: 10px;
}
.upload-image.center {
  text-align: center;
}
.upload-image .upload-status {
  cursor: move;
  margin-left: 10px;
  margin-bottom: 10px;
}
.upload-image .upload-status:hover .close {
  display: inline-block;
}
.upload-image .upload-status .close {
  display: none;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  right: 0;
}
.upload-image .upload-status .close .bp-icon-font {
  font-size: 12px;
  color: #fff;
}
.upload-image .upload-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px dashed #cbcbcb;
  margin-left: 10px;
  margin-bottom: 10px;
  color: #bdc0c5;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.upload-image .upload-btn .upload {
  opacity: 0;
  width: 80px;
  height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.upload-image .upload-btn .icon-add {
  font-size: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.upload-image .upload-btn:hover {
  border-color: #00a1d6;
  color: #00a1d6;
}
.upload-disable-mask {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 18px;
  border-radius: 8px;
  z-index: 1;
  background-color: rgba(0,0,0,0.4);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.upload-disable-mask .text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.image-box {
  position: relative;
}
.pic-box {
  margin-left: 20px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.pic-box.active,
.pic-box:hover {
  background-image: url();
}
.image-popup {
  position: absolute;
  top: 30px;
  left: 5px;
  z-index: 2;
}


.static-popup {
  display: inline-block;
  position: relative;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);
  opacity: 1;
  margin-top: 0;
  z-index: 20;
}
.static-popup.bp-arrow:before {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: 22px;
  width: 8px;
  height: 5px;
  background: url() 0 -49px no-repeat;
}
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  color: #999;
  cursor: pointer;
}
.title {
  padding: 15px;
  font-size: 14px;
  color: #222;
  text-align: left;
}
.move-in-enter-active {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.move-in-leave-active {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.move-in-enter,
.move-in-leave-active {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  opacity: 0;
}

.hint {
  margin-left: 10px;
  font-size: 12px;
  color: #c0c0c0;
}

.at-icon {
  margin-left: 20px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.at-icon:hover {
  background-image: url();
}

.icon-topic {
  margin-left: 20px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.icon-topic:hover {
  background-image: url();
}
.hash-popup {
  z-index: 20000;
  width: 164px;
  border: 1px solid #e5e9ef;
  -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);
  border-radius: 4px;
  position: absolute;
}
.hash-popup .hint {
  margin: 0;
  height: 30px;
  line-height: 32px;
  padding-left: 10px;
}
.hash-popup .topic-container {
  height: 120px;
  overflow: auto;
}
.hash-popup .topic-container .item {
  line-height: 24px;
  padding-left: 10px;
}
.hash-popup .topic-container .item.is-selected {
  color: #00a1d6;
  background-color: #f4f5f7;
}
.vote-box[data-v-667ed540] {
  position: relative;
}
.icon-vote[data-v-667ed540] {
  margin-left: 20px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
.icon-vote.active[data-v-667ed540],
.icon-vote[data-v-667ed540]:hover {
  background-image: url();
}


.most-viewed-panel {
  min-height: 98px;
  width: calc(100% - 2px);
  background: #fff;
  border-radius: 4px;
  top: 48px;
  z-index: 10;
  margin-bottom: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.most-viewed-panel .list-container {
  min-height: 98px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.most-viewed-panel .list-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-transition: left 0.35s;
  transition: left 0.35s;
  padding: 16px 0;
  position: relative;
}
.most-viewed-panel .list-content > * {
  width: 62px;
  margin: 0px 5px 0px 5px;
}
.most-viewed-panel .list-content .most-viewed-item {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.most-viewed-panel .list-content .most-viewed-item .section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 5px;
}
.most-viewed-panel .list-content .most-viewed-item .section .icon-all {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  position: relative;
  background-color: #b9e9f9;
  margin: 1px;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
  border: 2px solid #fff;
}
.most-viewed-panel .list-content .most-viewed-item .section .icon-all.active {
  -webkit-box-shadow: 0 0 0 1px #00a1d6;
  box-shadow: 0 0 0 1px #00a1d6;
}
.most-viewed-panel .list-content .most-viewed-item .section .icon-all > .icon {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 22px;
  height: 22px;
  fill: #00a1d6;
}
.most-viewed-panel .list-content .most-viewed-item .section .avatar {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  background-size: 36px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin: 1px;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
  border: 2px solid #fff;
}
.most-viewed-panel .list-content .most-viewed-item .section .avatar.active {
  -webkit-box-shadow: 0 0 0 1px #00a1d6;
  box-shadow: 0 0 0 1px #00a1d6;
}
.most-viewed-panel .list-content .most-viewed-item .section .avatar .red-dot {
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  background-color: #fa5a58;
  border-radius: 50%;
  position: absolute;
  bottom: 1px;
  right: 1px;
}
.most-viewed-panel .list-content .most-viewed-item .name {
  color: #6d757a;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 16px;
  max-height: 2.666666666666667em;
}
.most-viewed-panel .list-content .most-viewed-item .name.active {
  color: #00b5e5;
}
.most-viewed-panel .list-content .most-viewed-item:hover {
  cursor: pointer;
}
.most-viewed-panel .list-content .most-viewed-item:hover .name {
  color: #00b5e5;
}
.most-viewed-panel > .icon {
  padding: 8px;
  font-size: 12px;
  fill: #ccd0d7;
  cursor: not-allowed;
}
.most-viewed-panel > .icon.active {
  fill: #99a2aa;
}
.most-viewed-panel > .icon.active:hover {
  cursor: pointer;
  fill: #00a1d6;
}
.css-1dtzbno {
  fill: currentcolor;
  width: 1em;
  height: 1em;
}

.feed-card {
  font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
  font-size: 14px;
  width: 100%;
  min-width: 632px;
  /* padding 8px 8px 0 8px */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.feed-card .loading-content {
  width: 100%;
  height: 270px;
  line-height: 270px;
  border-radius: 4px;
}
.feed-card .loading-content .loading-text {
  text-align: center;
}
.feed-card .loading-content .loading-text .loading-img {
  position: relative;
  top: 5px;
  padding: 0 5px;
}
.feed-card .empty-content {
  width: 100%;
  height: 270px;
  background: #fff;
  text-align: center;
}
.feed-card .empty-content .empty-img {
  margin: 56px auto 0;
}
.feed-card .empty-content .empty-text {
  padding-top: 14px;
  font-size: 14px;
  letter-spacing: 0;
}
.feed-card .content {
  width: 100%;
}
.feed-card .content .bottom {
  height: 130px;
}
.feed-card .content .bottom img {
  margin-top: 18px;
}
.feed-card .content .bottom a,
.feed-card .content .bottom p {
  top: 50px;
  left: 50%;
  margin-left: -55px;
}
.feed-card .content .bottom a {
  outline: none;
  text-decoration: none;
}
.first-card-with-title {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.feed-title {
  background-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 12px 14px;
  color: #222;
}

.tab-bar {
  width: 100%;
  height: 48px;
  background: #fff;
  border-radius: 4px;
  position: relative;
  margin-bottom: 8px;
}
.tab-bar .tab {
  display: inline-block;
  min-width: 56px;
  height: 48px;
  text-align: center;
  padding-left: 20px;
  vertical-align: top;
}
.tab-bar .tab .tab-text {
  display: inline-block;
  min-width: 56px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
}
.tab-bar .tab .tab-text.selected,
.tab-bar .tab .tab-text:hover {
  color: #00b5e5;
}
.tab-bar .line {
  position: absolute;
  width: 56px;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #00a1d6;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
p {
  margin: 0;
  padding: 0;
}
.new-notice-bar {
  background: #fcf9d7;
  /*border 1px solid #E8DEA1*/
  border-radius: 4px;
  /*width 632px*/
  height: 36px;
  line-height: 36px;
  text-align: center;
  margin-bottom: 8px;
}
.new-notice-bar .message {
  color: #e3b43d;
  font-size: 12px;
  letter-spacing: 0;
}


.card {
  position: relative;
  top: 0;
  //border-radius: 4px;
  min-width: 632px;
  background: #fff;
}
.card .main-content {
  width: 534px;
  padding-top: 27px;
  margin-left: 88px;
}
.card .main-content .user-name {
  color: #222;
}
.card .main-content .user-name a {
  //color: #222;
  color: rgb(251, 114, 153);
}
.card .main-content .user-name a:hover {
  color: #00b5e5;
}
.card .main-content .user-name.big-vip a,
.card .main-content .user-name.big-vip a:hover {
  color: #fb7299;
}
.card .main-content .time {
  padding-top: 4px;
}
.card .main-content .time .detail-link {
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.card .main-content .time .detail-link:hover {
  color: #ff85ad;
}
.card .main-content .error-msg {
  color: #fa5a57;
  line-height: 20px;
  padding-top: 24px;
}
.card .main-content .error-msg .icon-error {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14A7 7 0 1 1 7 0a7 7 0 0 1 0 14zm-.75-9.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0zM7.375 6h-.75a.125.125 0 0 0-.125.125v4.25c0 .069.056.125.125.125h.75a.125.125 0 0 0 .125-.125v-4.25A.125.125 0 0 0 7.375 6z' fill='%23FA5A57' fill-rule='nonzero'/%3E%3C/svg%3E") no-repeat center;
  display: inline-block;
  margin-right: 4px;
}
.card .main-content .button-bar {
  width: 100%;
}
.card .main-content .button-bar .bp-svg-icon {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/bp-svg-icon.eb35343a.svg);
}
.card .main-content .button-bar .single-button {
  display: inline-block;
  line-height: 48px;
  width: 92px;
  font-size: 12px;
}
.card .main-content .button-bar .single-button .single-icon {
  font-size: 20px;
  padding-right: 4px;
  -webkit-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.card .main-content .button-bar .single-button .text-bar.selected {
  color: #00a1d6;
}
.card .main-content .button-bar .single-button .text-bar:hover {
  color: #00a1d6;
}
.card .main-content .button-bar .single-button .text-bar .text-offset {
  position: relative;
  top: 2px;
}
.card .user-head {
  display: block;
  position: absolute;
  width: 48px;
  height: 48px;
  top: 24px;
  left: 24px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.card .user-head .user-decorator {
  position: absolute;
  width: 84px;
  height: 84px;
  top: -18px;
  left: -18px;
  background: transparent center/contain no-repeat;
}
.card .user-head .verify-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #fff center/14px no-repeat;
}
.card .user-head .verify-personal {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/verify_0.6e59734b.svg);
}
.card .user-head .verify-company {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/verify_1.d53e8b68.svg);
}
.card .user-head .big-vip {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/verify_big.230767cd.svg);
}
.card .card-decorator {
  position: absolute;
  top: 18px;
  right: 48px;
  width: 60px;
  height: 34px;
  background: transparent center/contain no-repeat;
}
.card .card-decorator .fans-card-text {
  font-family: "fans num";
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 17px;
  right: 54px;
  line-height: normal !important;
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
  -webkit-transform-origin: right;
  transform-origin: right;
}
.card .focus-btn {
  width: 70px;
  height: 32px;
  top: 24px;
  right: 48px;
}
.card .focus-btn .unfocus {
  border: 1px solid #00a1d6;
  border-radius: 4px;
  background-color: #fff;
}
.card .focus-btn .unfocus:hover {
  background-color: #00a1d6;
}
.card .focus-btn .unfocus .unfocus-text {
  color: #00a1d6;
  line-height: 32px;
}
.card .focus-btn .unfocus .unfocus-text:hover {
  color: #fff;
}
.card .focus-btn .focus {
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  background-color: #fff;
}
.card .focus-btn .focus:hover {
  border-color: #00a1d6;
}
.card .focus-btn .focus .focus-text {
  color: #9ea7ae;
  line-height: 32px;
}
.card .focus-btn .focus .focus-text:hover {
  color: #00a1d6;
}
.card .button-area {
  position: absolute;
  top: 33px;
  right: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card .button-area .more-button {
  font-size: 16px;
  color: #ccd0d7;
}
.card .button-area .more-button:hover {
  color: #00a1d6;
}
.card .button-group {
  position: absolute;
  top: 24px;
  right: 24px;
}
.card .button-group .disabled {
  opacity: 0.4;
  background: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.card .button-group .draft-button {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  padding: 0 15px;
  margin-left: 6px;
  line-height: 24px;
  color: #6d757a;
}
.card .button-group .draft-button:hover {
  border-color: #00a1d6;
  color: #00a1d6;
}
.card .panel-area {
  /*width 532px*/
  margin-left: 24px;
  margin-right: 24px;
  padding-bottom: 2px;
}
.card .more-panel {
  position: absolute;
  width: 94px;
  text-align: center;
  top: 58px;
  background: #fff;
  border: 1px solid #e5e9ef;
  -webkit-box-shadow: 0 11px 12px 0 rgba(106,115,133,0.12);
  box-shadow: 0 11px 12px 0 rgba(106,115,133,0.12);
  border-radius: 8px;
  color: #222;
  z-index: 10;
  right: 5px;
}
.card .more-panel.tag {
  right: -9px !important;
}
.card .more-panel:after {
  content: "";
  display: block;
  border-top: 1px solid #e5e9ef;
  border-left: 1px solid #e5e9ef;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  position: absolute;
  top: -5px;
  right: 12px;
  background: #fff;
}
.card .more-panel .child-button {
  padding-top: 4px;
  padding-bottom: 4px;
}
.card .more-panel .child-button:first-child {
  padding-top: 18px;
}
.card .more-panel .child-button:last-child {
  padding-bottom: 18px;
}
.card .more-panel .child-button:hover {
  color: #00b5e5;
}
.type-label {
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 8px;
  background: #fb7299;
  font-size: 12px;
  color: #fff;
  position: relative;
  top: -2px;
}
.chrome-scale-1-1 .single-icon {
  font-size: 20px !important;
  -webkit-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
}
p {
  margin: 0;
  padding: 0;
}
.fold-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 46px;
  border-top: 1px solid #e5e9ef;
}
.fold-box .fold-hoverable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  color: #99a2aa;
  font-size: 14px;
}
.fold-box .fold-hoverable:hover {
  color: #00a1d6;
}
.fold-box .fold-hoverable:hover .fold-arrow {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/expandmore_blue.a220239b.svg);
}
.fold-box .fold-users {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.fold-box .fold-user-avatar {
  width: 30px;
  height: 30px;
  background: #fff center/cover no-repeat;
  margin-right: 5px;
  border-radius: 50%;
}
.fold-box .fold-arrow {
  width: 14px;
  height: 14px;
  background: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/expandmore.537c89de.svg) center/contain no-repeat;
  margin-left: 4px;
}
.custom-like-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: center/contain no-repeat;
  vertical-align: text-top;
  margin-right: 4px;
  margin-top: -2px;
}
.custom-like-icon.zan {
  background-size: 15px;
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/zan.0da89524.svg);
}
.custom-like-icon.zan-a-hover {
  background-size: 15px;
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/zan-a-hover.7aa2757b.svg);
}
.custom-like-icon.zan-hover {
  background-size: 15px;
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/zan-hover.ab577109.svg);
}
.svga-position {
  position: absolute;
  bottom: 8px;
  left: -44px;
  z-index: 10;
}
.icon-hidden {
  visibility: hidden;
}
.folded-card {
  background-color: #fff;
  height: 46px;
  text-align: center;
  line-height: 46px;
  color: #99a2aa;
  font-size: 14px;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  margin: 8px 0;
}
.folded-card:hover {
  color: #00a1d6;
}
.folded-card:hover .fold-arrow {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/expandmore_blue.a220239b.svg);
}
.folded-card .fold-arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/expandmore.537c89de.svg) center/contain no-repeat;
  -webkit-transform: translate(4px, 2px);
  transform: translate(4px, 2px);
}

/*!
 * @bilibili/userAvatar
 * version: 1.0.3. Powered by main-frontend
 * 用户头像公共组件.
 * author: wuxiuran
 */
.bili-avatar {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.bili-avatar * {
  margin: 0;
  padding: 0;
}
.bili-avatar-face {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.bili-avatar-pendent {
  height: 170%;
  width: 170%;
  position: absolute;
  top: -35%;
  left: -35%;
  overflow: hidden;
}
.bili-avatar-pendent img {
  height: 100%;
  min-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bili-avatar-img {
  border: none;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-img-radius {
  border-radius: 50%;
}
.bili-avatar-img[src=""],
.bili-avatar-img:not([src]) {
  opacity: 0;
}
.bili-avatar-icon {
  width: 33.33333%;
  height: 33.33333%;
  width: -webkit-calc(100% * 1 / 3);
  width: -moz-calc(100% * 1 / 3);
  width: calc(100% * 1 / 3);
  height: -webkit-calc(100% * 1 / 3);
  height: -moz-calc(100% * 1 / 3);
  height: calc(100% * 1 / 3);
  position: absolute;
  right: 0;
  bottom: 0;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-icon--big-vip {
  background-image: url();
}
.bili-avatar-icon--business {
  background-image: url();
}
.bili-avatar-icon--personal {
  background-image: url();
}
.bili-avatar-icon--small-vip {
  background-image: url();
}
.bili-avatar-img.bili-avatar-img-error {
  display: none;
}
.card-content {
  /* width: 532px */
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* padding-right 12px */
  padding-right: 0;
  /* &.fake */
  /* padding-bottom: 20px */
}
.card-content .repost,
.card-content .not-support,
.card-content .deleted {
  position: relative;
  padding: 8px 12px;
  border-radius: 4px;
  margin-left: -12px;
  background-color: #f4f5f7;
  line-height: 22px;
}
.card-content .repost p,
.card-content .not-support p,
.card-content .deleted p {
  padding: 0;
  margin: 0;
}
.card-content .repost .forbidden-icon,
.card-content .not-support .forbidden-icon,
.card-content .deleted .forbidden-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.card-content .repost .forbidden-text,
.card-content .not-support .forbidden-text,
.card-content .deleted .forbidden-text {
  display: block;
  text-indent: 20px;
  font-size: 14px;
}
.card-content .repost .not-support,
.card-content .not-support .not-support,
.card-content .deleted .not-support,
.card-content .repost .deleted,
.card-content .not-support .deleted,
.card-content .deleted .deleted {
  padding: 0;
  margin-left: 0;
}
.card-content .repost .deleted-icon,
.card-content .not-support .deleted-icon,
.card-content .deleted .deleted-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.card-content .repost .deleted-text,
.card-content .not-support .deleted-text,
.card-content .deleted .deleted-text {
  cursor: pointer;
  display: block;
  text-indent: 20px;
  font-size: 14px;
}
.description {
  max-width: 100%;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 22px;
  word-wrap: break-word;
}
.description.active {
  cursor: pointer;
}
.pure-text .description {
  margin-bottom: 0;
}
.original-poster {
  line-height: 22px;
}
.original-poster .username {
  font-size: 14px;
  margin-right: 8px;
  margin-bottom: 5px;
  color: #00a1d6;
  cursor: pointer;
}
.original-poster-tip {
  display: inline-block;
  font-size: 12px;
  color: #99a2aa;
  vertical-align: top;
  padding-top: 1px;
}
.vc-video {
  height: 300px;
}
.vc-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 6;
}
.vc-cover .duration {
  position: absolute;
  right: 16px;
  bottom: 8px;
  color: #fff;
}
.vc-cover .play-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.vc-cover .play-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -26px;
  margin-left: -28px;
}
.vc-ctnr {
  width: 520px;
}
.up-info {
  width: 100%;
  position: relative;
}
.up-info .up-info-avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.up-info .up-info-avatar:hover {
  cursor: pointer;
}
.up-info .up-info-name {
  display: inline-block;
  font-size: 14px;
  color: #00a1d6;
  line-height: 24px;
  vertical-align: top;
  padding: 0 8px;
}
.up-info .up-info-tip {
  display: inline-block;
  font-size: 12px;
  color: #99a2aa;
  vertical-align: top;
  padding-top: 1px;
}
.up-info .up-focus-btn {
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 24px;
  font-size: 12px;
  color: #00a1d6;
  line-height: 24px;
  border: 1px solid #00a1d6;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.up-info .up-focus-btn.is-focus {
  border-color: #d3d7de;
  color: #999;
}


.text {
  font-size: 14px;
  letter-spacing: 0.5px;
}
.description .content {
  display: block;
  color: inherit;
  padding-right: 10px;
}
.content-ellipsis {
  display: block;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  word-wrap: break-word;
}
.hidden {
  display: none;
  height: 0;
}
.visibility-hidden {
  visibility: hidden;
}
.content-full {
  width: 100%;
  word-break: break-word;
  word-wrap: break-word;
}
.expand-btn {
  display: inline-block;
  color: #178bcf;
  cursor: pointer;
  line-height: 22px;
}
.expand-btn:hover {
  color: #00b5e5;
}

.div-load-more .load-more {
  width: 100%;
  height: 51px;
  line-height: 51px;
  text-align: center;
}
.div-load-more .no-more {
  position: relative;
  width: 100%;
  height: 130px;
  text-align: center;
}
.div-load-more .no-more .end-img {
  margin-top: 18px;
  vertical-align: middle;
}
.div-load-more .no-more .end-text {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -55px;
}


.im-popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10003;
  background: rgba(0,0,0,0.6);
  color: #666;
}
.split-line {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
  border-top: 1px solid #e9eaec;
}
.popup-content-ctnr .content {
  padding: 24px 0 25px;
  line-height: 1.7;
  font-size: 14px;
}
.im-popup-fade-enter-active,
.im-popup-fade-leave-active {
  -webkit-transition: 200ms;
  transition: 200ms;
}
.im-popup-fade-enter,
.im-popup-fade-leave-to {
  opacity: 0;
}
.im-popup-fade-enter-to,
.im-popup-fade-leave {
  opacity: 1;
}

.p-relative {
  position: relative;
}
.p-absolute {
  position: absolute;
}
.bg-center {
  background-position: center center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.pointer {
  cursor: pointer;
}
.a-move-in-top {
  -webkit-animation: move-in-top-data-v-3c863400 cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
  animation: move-in-top-data-v-3c863400 cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
}
.a-scale-out {
  -webkit-animation: scale-out-data-v-3c863400 cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
  animation: scale-out-data-v-3c863400 cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
}
.a-forwards {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.t-center {
  text-align: center;
}
.bp-popup-panel {
  width: 500px;
  height: auto;
  top: 50%;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 5em 0.5em rgba(0,0,0,0.2);
  box-shadow: 0 0 5em 0.5em rgba(0,0,0,0.2);
  word-wrap: break-word;
  word-break: break-word;
}
.bp-popup-panel .title-ctnr {
  padding-bottom: 5px;
}
.bp-popup-panel .title-ctnr .popup-title {
  margin: 0;
  color: #23ade5;
  font-weight: 100;
  font-size: 18px;
}
.bp-popup-panel .popup-btn-ctnr .panel-btn {
  margin: 0 10px;
}
.bp-popup-panel .close-btn {
  width: 20px;
  height: 20px;
  right: 16px;
  top: 12px;
  color: #999;
  line-height: 20px;
  -webkit-transition: all cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.3s;
  transition: all cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.3s;
}
.bp-popup-panel .close-btn:hover {
  -webkit-transform: rotate(180deg) scale(1.1);
  transform: rotate(180deg) scale(1.1);
}
.bp-popup-panel .close-btn:active {
  -webkit-transform: rotate(180deg) scale(1);
  transform: rotate(180deg) scale(1);
  -webkit-transition: none !important;
  transition: none !important;
}
.bp-popup-panel .close-btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.bp-popup-panel .close-btn.disabled:hover,
.bp-popup-panel .close-btn.disabled:active {
  -webkit-transform: rotate(0) scale(1) !important;
  transform: rotate(0) scale(1) !important;
}

.im-popup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.im-popup .bp-popup-panel {
  top: 0 !important;
}
.im-popup .bp-popup-panel .title-ctnr .popup-title {
  font-family: PingFangSC-Regular !important;
  font-size: 18px !important;
  font-weight: 100 !important;
  color: #0097d0 !important;
}
.im-popup .hide-button .popup-title {
  padding: 15px 0;
}
.im-popup .im-popup-shell {
  width: 464px !important;
  border-radius: 12px;
  padding: 24px 32px !important;
  overflow: hidden;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.im-popup .bp-popup-panel .close-btn {
  top: 22px !important;
}


.type-selector {
  width: 50%;
  cursor: pointer;
  margin-top: 20px;
  position: relative;
}
.type-selector:last-child {
  margin-right: 0;
}
.type-selector .bp-svg-icon {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
}
.radio {
  width: 22px;
  margin-right: 5px;
  cursor: pointer;
  visibility: hidden;
}
.radio-selected,
.radio-default {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/radio-default.ecbd76f5.svg) center/contain no-repeat;
}
.radio-selected {
  background-image: url(//s2.hdslb.com/bfs/static/blive/blfe-dynamic-web/static/img/radio-selected.fd4f5b34.svg);
}


.content-text {
  color: #666;
}
.selector-box {
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*.name {
  padding: 0 5px;
  font-weight: bold;
  text-decoration: underline;
}*/
.report-tip {
  //padding-left: 16px;
  font-size: 12px;
  margin: 8px 0;
}
.report-input {
  border: 1px solid #e9eaec;
  border-radius: 4px;
  padding: 5px 10px;
  //margin-left: 16px;
}
.other-reason {
  margin-right: 50% !important;
}
.input-box {
  position: relative;
}
.textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  height: 50px;
  width: 100%;
  border-radius: 4px;
  padding: 0 0 14px;
  -webkit-transition: 200ms;
  transition: 200ms;
  font-size: 12px;
  color: #333;
  font-size: 14px;
}
.textarea::-webkit-input-placeholder {
  color: #999;
}
.indicator2 {
  color: #c0c0c0;
  position: absolute;
  right: 5px;
  bottom: 0;
  padding: 1px;
  font-size: 12px;
}
.too-much {
  color: #f00;
}

.imagesbox .zoom-wrap .zoom-list {
  line-height: 0;
  text-align: left;
  margin-top: -4px;
  margin-left: -4px;
  vertical-align: top;
}
.imagesbox .zoom-wrap .zoom-list.zoom-1 {
  width: auto;
  height: auto;
  margin-bottom: 4px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-4 {
  width: 228px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-2 {
  width: 456px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-3 {
  width: 456px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-5 {
  width: 342px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-6 {
  width: 342px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-7 {
  width: 342px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-8 {
  width: 342px;
}
.imagesbox .zoom-wrap .zoom-list.zoom-9 {
  width: 342px;
}
.imagesbox .zoom-wrap .zoom-list .card111 {
  width: 104px;
  height: 104px;
  margin: 4px 0 0 4px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.imagesbox .zoom-wrap .zoom-list .card111.card-1 {
  width: auto;
  height: auto;
  border-radius: 0;
}
.imagesbox .zoom-wrap .zoom-list .card111.card-1 img {
  border-radius: 4px;
}
.imagesbox .zoom-wrap .zoom-list .card111 img {
  max-width: 100%;
  max-height: 100%;
}
.imagesbox .zoom-wrap .zoom-list .card111 .z-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
}
.imagesbox .zoom-wrap .zoom-list .card111 .z-error {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,228,228,0.88);
  font-size: 12px;
  color: #e95c82;
  text-align: center;
  line-height: 16px;
}
.imagesbox .zoom-wrap .zoom-list .card111 .z-error .bp-svg-icon {
  font-size: 28px;
  margin-bottom: 6px;
  margin-top: 18px;
}
.imagesbox .zoom-wrap .zoom-list .card111 .plus-mask {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 104px;
  text-align: center;
  color: #fff;
}
.imagesbox .boost-control {
  height: 32px;
  background: #f4f5f7;
  border-radius: 4px 4px 0 0;
  text-align: left;
}
.imagesbox .boost-control li {
  font-size: 12px;
  color: #666;
  line-height: 34px;
  display: inline-block;
  margin: 0 16px;
  cursor: pointer;
}
.imagesbox .boost-control li i {
  color: #999;
  display: inline-block;
  margin: -2px 6px 0 0;
}
.imagesbox .boost-control li:hover {
  color: #23ade5;
}
.imagesbox .boost-control li:hover i {
  color: #23ade5;
}
.imagesbox .boost-img {
  width: 100%;
  background: #f4f5f7;
  line-height: 0;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  position: relative;
}
.imagesbox .boost-img .prev,
.imagesbox .boost-img .next {
  position: absolute;
  width: 155.4px;
  height: 100%;
  background: rgba(0,0,0,0);
  outline: none;
  border: none;
  z-index: 10;
  zoom: 1;
}
.imagesbox .boost-img .prev {
  left: 0;
  top: 0;
  cursor: url(), url("//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.left.cur?v1"), pointer;
  z-index: 10;
}
.imagesbox .boost-img .next {
  right: 0;
  top: 0;
  cursor: url(), url("//s1.hdslb.com/bfs/static/blive/live-assets/canvas/photo-imager/cursor.right.cur?v1"), pointer;
  z-index: 10;
}
.imagesbox .boost-img .b-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.imagesbox .boost-img .boost-fade-enter-active,
.imagesbox .boost-img .boost-fade-leave-active {
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}
.imagesbox .boost-img .boost-fade-enter,
.imagesbox .boost-img .boost-fade-leave-to {
  opacity: 0.4;
}
.imagesbox .boost-slider-wrap {
  position: relative;
}
.imagesbox .boost-slider-wrap .boost-slider {
  width: 518px;
  margin: 6px 0 0 0;
  overflow: hidden;
  position: relative;
}
.imagesbox .boost-slider-wrap .boost-slider ul {
  text-align: left;
  white-space: nowrap;
  -webkit-transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
}
.imagesbox .boost-slider-wrap .boost-slider ul li {
  width: 54px;
  height: 54px;
  display: inline-block;
  margin-left: 4px;
  position: relative;
  cursor: pointer;
}
.imagesbox .boost-slider-wrap .boost-slider ul li:nth-of-type(9n + 1) {
  margin-left: 0;
}
.imagesbox .boost-slider-wrap .boost-slider ul li.active img {
  opacity: 1;
}
.imagesbox .boost-slider-wrap .boost-slider ul li img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  opacity: 0.5;
  -webkit-transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
}
.imagesbox .boost-slider-wrap .boost-slider ul li img:hover {
  opacity: 1;
}
.imagesbox .boost-slider-wrap .boost-slider .arrow-left,
.imagesbox .boost-slider-wrap .boost-slider .arrow-right {
  width: 12px;
  height: 54px;
  position: absolute;
  z-index: 10;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.41);
  background-size: 6px 10px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  cursor: pointer;
}
.imagesbox .boost-slider-wrap .boost-slider .arrow-left:hover,
.imagesbox .boost-slider-wrap .boost-slider .arrow-right:hover {
  background-color: rgba(0,0,0,0.7);
}
.imagesbox .boost-slider-wrap .boost-slider .arrow-left:active,
.imagesbox .boost-slider-wrap .boost-slider .arrow-right:active {
  background-color: rgba(0,0,0,0.9);
}
.imagesbox .boost-slider-wrap .boost-slider .arrow-left {
  left: 0;
  top: 0;
  background-image: url();
}
.imagesbox .boost-slider-wrap .boost-slider .arrow-right {
  right: 0;
  top: 0;
  background-image: url();
}
.imagesbox .boost-slider-wrap .bp-svg-icon {
  font-size: 28px;
}
.imagesbox .boost-slider-wrap .boost-slider-border {
  width: 58px;
  height: 58px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #fb7299;
  border-radius: 4px;
  position: absolute;
  z-index: 9;
  margin: -2px 0 0 -2px;
  top: 0;
  -webkit-transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  transition: all 0.18s cubic-bezier(0.22, 0.58, 0.12, 0.98);
}

.imagesbox {
  width: 518px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
}
.imagesbox div,
.imagesbox img,
.imagesbox ul,
.imagesbox li,
.imagesbox p,
.imagesbox span,
.imagesbox i {
  padding: 0;
  margin: 0;
}
.imagesbox .tag-img {
  width: 18px;
  height: 18px;
  margin: -25px 0 0 7px;
  background: url() center/contain no-repeat;
}
.imagesbox .tag-img.small {
  margin: -22px 0 0 4px;
}
.img-content {
  background: #fff center/cover no-repeat;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.img-content.bg-top {
  background-position: top;
}
